<!-- 吸顶轮播菜单导航 -->
<template>
	<view>
		<!-- 顶部内容 -->
		<view style="overflow:hidden">
			<image style="width: 100%;height: 340rpx;" src="https://www.mescroll.com/img/swiper1.jpg" />
			<image style="width: 100%;height: 245rpx;border-bottom: 15rpx solid #f2f2f2" src="https://www.mescroll.com/img/beibei/beibei2.jpg" />
		</view>
		<me-tabs v-model="tabIndex" :tabs="tabs" :tab-width="130"></me-tabs>
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :height="height"></mescroll-item>
			</swiper-item>
		</swiper>
		<float-touch @menuClick="floatTouchClick"></float-touch>
	</view>
</template>


<script>
	import FloatTouch from '../../../components/FloatTouch.vue'
	import MescrollItem from "./mescroll-swiper-item.vue";
	import MeTabs from './me-tabs.vue'
	export default {
		components: {
			MeTabs,
			FloatTouch,
			MescrollItem
		},
		data() {
			return {
				// topHeight: uni.upx2px(600), // 顶部内容的高度 (单位px),
				height: "", // 需要固定swiper的高度
				tabs: [{
					name: '全部'
				}, {
					name: '奶粉'
				}, {
					name: '面膜'
				}, {
					name: '图书'
				}, {
					name: '果汁'
				}, {
					name: '奶瓶'
				}, {
					name: '美素'
				}, {
					name: '花王'
				}, {
					name: '韩蜜'
				}],
				tabIndex: 0 // 当前tab的下标
			}
		},
		watch: {
			tabIndex(i) {
				// 当列表禁止滚动时,需把列表滚动条置顶 (解决问题: "全部"tab翻到第二页,切换到其他tab,滚动到顶部,再切回"全部"tab,此时的列表数据应该重头开始)
				if (this.disableScroll) {
					this.disableScroll = false // 当disableScroll=true时,scroll-view的scrollTo会失效,需先开启,再置顶
					this.$nextTick(() => {
						let mescroll = this.getMescroll(i)
						mescroll && mescroll.scrollTo(0, 0)
						setTimeout(() => { // 经测试android真机需延时300ms才能恢复禁止滚动,否则scrollTo有可能无效
							this.disableScroll = true
						}, 300)
					})
				}
			}
		},
		onLoad() {
			// 需要固定swiper的高度 (需减去悬浮tabs的高度64rpx)
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(64) + 'px'
		},
		mounted() {
			// #ifdef H5
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			}) // 刷新浏览器,重置滚动条
			// #endif
		},
		methods: {
			// 轮播菜单
			swiperChange(e) {
				this.tabIndex = e.detail.current
			},
			floatTouchClick(e) {
				if (e === 3) { // 点击的是语音录入
					plus.speech.startRecognize({
						continue: false,
						engine: 'iFly',
						lang: 'zh-cn',
						nbest: 1,
						punctuation: true,
						timeout: 20000,
						userInterface: true
					}, (text) => {
						let page = ''
						if (text.includes('录音')) {
							page = '/pages/tabbar/option/sound/index'
						} else if (text.includes('图表')) {
							page = '/pages/tabbar/option/chart/index'
						} else if (text.includes('上传图片') || text.includes('图片')) {
							page = '/pages/tabbar/option/picture/index'
						} else if (text.includes('表单')) {
							page = '/pages/tabbar/option/form/index'
						} else if (text.includes('地图')) {
							page = '/pages/tabbar/option/map/index'
						}
						if (text) {
							text = '识别到:' + text
						} else {
							text = '未能识别到文字'
						}
						uni.showToast({
							title: text,
							icon: 'none',
							duration: 3000
						})
						uni.navigateTo({
							url: page
						})
					})
				} else {
					uni.showToast({
						title: '待开发,敬请期待....',
						icon: 'none',
						duration: 3000
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
</style>
